<template>
  <view class="address-search">
    <view class="search-box">
      <uni-icons type="search" size="20" color="#999"></uni-icons>
      <input 
        v-model="keyword" 
        class="search-input"
        placeholder="搜索地址"
        @input="onSearchInput"
        @confirm="onSearchConfirm"
      />
      <uni-icons 
        v-if="keyword" 
        type="clear" 
        size="18" 
        color="#999"
        @tap="clearSearch"
      ></uni-icons>
    </view>
    
    <!-- 搜索结果列表 -->
    <scroll-view 
      v-if="searchResults.length > 0" 
      class="result-list" 
      scroll-y
    >
      <view 
        v-for="(item, index) in searchResults" 
        :key="index"
        class="result-item"
        @tap="selectAddress(item)"
      >
        <view class="result-main">
          <text class="result-name">{{ item.name }}</text>
          <text class="result-address">{{ item.address }}</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
      </view>
    </scroll-view>
    
    <!-- 空状态 -->
    <view v-if="showEmpty" class="empty-state">
      <text class="empty-text">暂无搜索结果</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getInputtips } from '@/utils/amapWx';

const emit = defineEmits(['select']);

const keyword = ref('');
const searchResults = ref<any[]>([]);
const showEmpty = ref(false);
let searchTimer: any = null;

// 搜索输入
const onSearchInput = () => {
  showEmpty.value = false;
  
  // 防抖处理
  if (searchTimer) {
    clearTimeout(searchTimer);
  }
  
  searchTimer = setTimeout(() => {
    performSearch();
  }, 500);
};

// 执行搜索
const performSearch = async () => {
  if (!keyword.value.trim()) {
    searchResults.value = [];
    return;
  }
  
  try {
    const result = await getInputtips(keyword.value);
    
    if (result.success && result.tips.length > 0) {
      searchResults.value = result.tips;
      showEmpty.value = false;
    } else {
      searchResults.value = [];
      showEmpty.value = true;
    }
  } catch (error) {
    console.error('搜索失败:', error);
    searchResults.value = [];
    showEmpty.value = true;
  }
};

// 搜索确认
const onSearchConfirm = () => {
  performSearch();
};

// 清除搜索
const clearSearch = () => {
  keyword.value = '';
  searchResults.value = [];
  showEmpty.value = false;
};

// 选择地址
const selectAddress = (item: any) => {
  emit('select', item);
  clearSearch();
};
</script>

<style scoped>
.address-search {
  background-color: #fff;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  gap: 15rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.result-list {
  max-height: 600rpx;
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.result-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.result-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.result-address {
  font-size: 24rpx;
  color: #999;
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>